<template>
	<view class="course-record-page home-wrap" :style="{ 'background':'#fff'}">
		<shopro-navbar :isBack="true" :background="{'background':'#fff'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">购买课程</text>
		</shopro-navbar>
		<view class="u-p-20">
			<!-- 当前科目选择 -->
			<view class="subject-select">
				<text>当前科目</text>
				<picker :range="subjects" range-key="label" @change="onSubjectChange">
					<!-- <view class="picker">
						{{ currentSubject.label }}
						<text class="arrow">&#9660;</text>
					</view> -->
				</picker>
				<view class="picker u-flex" @click="jump('/pages/index/chooseCourse')">
					<view class="picker-btn u-m-r-4 u-flex u-flex-center u-flex-items-center">
						<view class="u-m-r-6"> {{ examType }}</view>
						<!--<u-icon name="arrow-down" size="20" :color="'#fff'"></u-icon> -->
						<view class="picker-btn-down">
							<image :src="HTTP_IMG_URL()+'/static/images/arrow-down-white.png'" model="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- Tab切换 -->
			<view class="tabs">
				<view
					v-for="(tab, idx) in tabs"
					:key="tab"
					:class="['tab', { active: activeTab === idx }]"
					@click="activeTab = idx">
					{{ tab }}
				</view>
			</view>
			<!-- Tab内容 -->
			<view v-if="activeTab === 0">
				<CourseCard
					v-for="(course, idx) in courseList"
					:key="idx"
					:courseId="course.id"
					:img="course.image || placeholderImg"
					:title="course.name"
					:source="'purchased'"
					@study="startStudy(course)"
				/>
			</view>
			<view v-else>
				<!-- 观看记录卡片 -->
				<view class="content-records" v-for="item in watchRecords" :key="item.id">
					<WatchRecordCard :record="item" @continue="onContinueWatch(item)" @showCatalog="onShowCatalog(item)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import WatchRecordCard from '@/components/WatchRecordCard.vue'
import QuizRecordCard from '@/components/QuizRecordCard.vue'
import recordApi from '@/api/record.js'
import CourseCard from "@/components/CourseCard.vue";
export default {
	components: {
		CourseCard,
		WatchRecordCard,
		QuizRecordCard
	},
	data() {
		return {
			examType: 'CAAC',
			selectedTypeIdx: 0,
			tabs: ['课程列表', '观看记录'],
			activeTab: 0,
			watchRecords: [],
			quizRecords: [],
			courseList: [],
			defaultAvatar: '', // 头像占位
			placeholderImg: '' // 课程图片占位
		}
	},
	onLoad() {
		this.getBuyCourse();
		this.getWatchList();
	},
	onShow() {
		const examType = wx.getStorageSync('examType');
		console.log(examType, 'uni.getStorageInfoSync');
		if(examType){
			this.examType = examType;
		}
		this.getBuyCourse();
		this.getWatchList();
	},
	methods: {
		HTTP_IMG_URL() {
			return this.$imgUrl;
		},
		jump(e) {
			// console.log(uni.getStorageSync('examType'), '3333');
			const newValue = uni.getStorageSync('examType');
			uni.navigateTo({
				url: e + '?value=' + newValue
			})
		},
		getBuyCourse () {
			let type = '';
			if(this.examType === 'CAAC') {
				type = '1';
			} else if(this.examType == 'AOPA'){
				type = '2';
			} else {
				type = '3';
			}
			recordApi.getBuyCourse({
				type: type
			}).then(res => {
				if (res.response.data.code == 1) {
					console.log(res.response.data.data.data, 'goumai====');
					this.courseList = res.response.data.data.data;
				}
			})
		},
		getWatchList () {
			recordApi.getWatchRecords().then((res) => {
				if (res.response.data.code == 1 && res.response.data.data) {
					this.watchRecords = res.response.data.data;
					console.log(this.watchRecords, 'getWatchList');
				}
			})
		},
		startStudy(course) {
			uni.navigateTo({
				url: `/pages/course/detail?courseId=` + course.id + '&source=yigou'
			});
		},
		onSubjectChange(e) {
			this.currentSubject = this.subjects[e.detail.value];
		},
		onContinueWatch(item) {
			uni.showToast({
				title: '继续学习',
				icon: 'none',
			});
			uni.navigateTo({
				url: '/pages/course/studyCourse?courseId=' + item.id
			});
		},
		onShowCatalog(item) {
			uni.showToast({
				title: '课程目录',
				icon: 'none',
			});
			uni.navigateTo({
				url: '/pages/course/detail?courseId=' + item.id
			});
		},
		onContinueQuiz(item) {
			uni.showToast({
				title: '继续做题',
				icon: 'none',
			});
			// uni.navigateTo({ url: '/pages/quiz/continue?id=' + item.id });
		}
	}
}
</script>

<style lang="scss">
.course-record-page {
	.header {
		text-align: center;
		margin-bottom: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.subject-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f8f9fb;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.picker {
			margin-left: 20rpx;
			color: #1976ff;
			font-weight: bold;
			.arrow {
				margin-left: 8rpx;
			}
		}
	}
	.tabs {
		display: flex;
		margin-bottom: 20rpx;
		.tab {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #888;
			border-bottom: 4rpx solid transparent;
			&.active {
				position: relative;
				color: #1976ff;
				font-weight: bold;
				&::after {
					position: absolute;
					content: "";
					bottom: 0;
					width: 20rpx;
					height: 6rpx;
					background: #1976ff;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.quiz-record-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 40rpx 0 20rpx 0;
	}
	.empty {
		text-align: center;
		color: #aaa;
		margin: 60rpx 0;
	}
}
.content-records{
	background:#fff;
	margin-bottom: 20rpx;
}
.picker-btn-down{
	width: 20rpx;
	height: 14rpx;
	margin-left: 18rpx;
	image{
		width: 100%;
		height: 100%;
		margin-bottom: 20rpx ;
	}
}
</style>
